<template>
  <div>
    <div class="divcoplit">
      <span style="display: inline-block; vertical-align: middle;">效果预览</span>
        <div @click="articleclick" class="divkey"> {{ !isVisiblearticle ? '显示' : '隐藏' }}</div>
    </div>

    <article v-show="isVisiblearticle" style="border: 2px solid #ccc; margin-top: 10px;height:600px;overflow-y: scroll;" v-html="hdata"></article>

    <div class="divcoplit">
      <span style="display: inline-block; vertical-align: middle;">内容编辑</span>
      <div @click="editorclick"  class="divkey">{{ !isVisible ? '显示' : '隐藏' }}</div>
    </div>

    <div v-show="isVisible" style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        v-model="html"
        @input="onChange"
        @onCreated="onCreated"
      />
    </div>
    <div class="divcoplit">
    <span style="display: inline-block; vertical-align: middle;">html代码编辑（文本编辑自动生成代码，通过第三方生成的页面可以直接将代码放入下框，点击获取初始代码获取文本编辑前代码）</span>
<div @click="btnclick" class="divkey">
  获取初始代码
</div>
</div>
    <div style="margin-top: 10px">
      <textarea
      v-model="invalue"
      @input="updateEditorContent"
      style="width: 100%; height: 500px; outline: none"
    ></textarea>
    </div>
  </div>
</template>

    <script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { init } from "echarts";

export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      hdata:this.initialValue,
      html: this.initialValue,
      isVisible:true,
      isVisiblearticle:true,
      invalue:this.initialValue,
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {

        },
      },
    };
  },
  watch: {
    initialValue(newValue) {
      this.html = newValue;
      this.invalue=  newValue;
    },
  },
  props: {
    initialValue: {
      type: String,
      required: true,
    },
  },
  methods: {
    //代码编辑
    updateEditorContent(event) {
      this.hdata = this.invalue;
    },
    btnclick(event){
      this.invalue= this.initialValue;
      this.hdata=this.invalue;
    },
    articleclick(event){
      this.isVisiblearticle = !this.isVisiblearticle;
    },
    editorclick(event){
      this.isVisible = !this.isVisible;
    },
    // 当编辑器内容变化时，更新<textarea>的内容
    onChange(editor) {
      if(this.hdata==""){
      this.hdata = this.initialValue;
     }
     else{
      this.hdata = this.html;
      this.invalue=this.html;
    }

    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;

      console.log(editor.getText()); // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;

      console.log(editor.getHtml()); // 执行 editor API
    },
  },
  created() {
    var that = this;
    this.editorConfig.placeholder = "请输入使用说明内容...";
    this.editorConfig.MENU_CONF["uploadImage"] = {
      timeout: 5 * 1000, // 5s
      accept: "image/png, image/gif, image/jpeg, image/bmp, image/x-icon",
      fieldName: "img",
      headers: (xhr) => {
        xhr.setRequestHeader("Authorization", "Bearer " + localStorage.Token);
      },
      maxFileSize: 5 * 1024, // 5M

      base64LimitSize: 5 * 1024, // 5kb 以下插入 base64

      onBeforeUpload(files) {
        return files; // 返回哪些文件可以上传
        // return false 会阻止上传
      },
      onProgress(progress) {
        console.log("onProgress", progress);
      },
      onSuccess(file, res) {
        console.log("onSuccess", file, res);
      },
      onFailed(file, res) {
        alert(res.message);
        console.log("onFailed", file, res);
      },
      onError(file, err, res) {
        alert(err.message);
        console.error("onError", file, err, res);
      },

      // 用户自定义上传图片
      customUpload(file, insertFn) {
        console.log("开始");
        var axios = require("axios");
        var FormData = require("form-data");
        var data = new FormData();
        data.append("file", file); // file 即选中的文件
        var config = {
          method: "post",
          url: "http://123.60.82.9:9291/images/Upload/Pic", //正式环境
          // url: "http://mingkuoapi.jieshi.cc/images/Upload/Pic", //远程测试环境
          // url: "http://127.0.0.1:2364/images/Upload/Pic", //本地
          data: data,    
        };

        //回调函数
        axios(config)
          .then(function (res) {
            console.log("开始2");
            var path = res.data.response.split(",")[0];
            console.log(path);
            let url = "http://123.60.82.9:9291/" + path; //正式环境
            // let url = "http://localhost:2364/" + path; //本地
            // let url = "http://mingkuoapi.jieshi.cc/" + path; //远程测试环境
            insertFn(url, "使用说明", url); //插入图片
          })
          .catch(function (error) {
            console.log(error);
          });
      },
    };
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css">
</style>

<style scoped>
.divcoplit {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-bottom:15px;
  border: 1px dashed #F8F8F8;
  background-color: #FFFFFF;
}
.divkey {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #ccc;
  margin-left: auto;
  height: 30px;
  width: 100px;
  background-color: #0062F7;
  color: #fff;
  cursor: pointer;
}
</style>